<template>
  <view class="content">
    <up-navbar bgColor="#904007" :safeAreaInsetTop="true" placeholder>
      <template #left>
        <view class="search-title">
          <image src="@/static/home/image/headLogo.png" mode="" class="head-logo"></image>
        </view>
      </template>
      <template #center>
        <view class="search-input" @click="onsearch">
          <up-icon name="search" color="#fff" size="32rpx"></up-icon>
          <view class="input-text">请根据藏品分类进行搜索</view>
        </view>
      </template>
      <template #right>
        <view class="search-mesage" @click="onMessage">
          <up-badge type="error" numberType="overflow" absolute :offset="[-9,-9]" max="99"
            :value="messageCount"></up-badge>
          <image src="@/static/home/icon/remind.png" mode=""></image>
        </view>
      </template>
    </up-navbar>
    <view class="content-banner" :style="'background-image: url('+ banner +')'">
      <view class="content-grid">
        <view class="grid-top">
          <view class="grid-title">
            <image src="@/static/home/icon/headIcon.png" mode="" class="grid-img"></image>
            <view class="grid-name">鉴宝</view>
          </view>
          <view class="grid-label">海量藏品·行家鉴定</view>
        </view>
        <view class="grid-list">
          <template v-if="!isExpert">
            <view class="list-nav" v-for="(item,index) in gridList" :key="index" @click="ongridfn(item.id)">
              <image :src="item.image" mode=""></image>
              <view class="list-text">{{item.name}}</view>
            </view>
          </template>
          <template v-if="isExpert">
            <view class="list-main">
              <view class="main-left">
                <view class="main-head">
                  <image src="@/static/home/icon/identify.png" mode="" class="main-img"></image>
                  <view class="main-name">鉴定任务</view>
                </view>
                <view class="main-title">你有 <up-badge type="error" numberType="overflow" inverted max="99"
                    :value="unidentified"></up-badge> 条任务未处理
                </view>
              </view>
              <view class="main-right" @click="toTask">
                <view>立即处理</view>
                <up-icon name="arrow-right" color="#A4682F" size="32rpx"></up-icon>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <view class="nav-content">
      <up-sticky :customNavHeight="offsetTop" bgColor="#fff" zIndex="11">
        <up-tabs :list="list1" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)" lineHeight="16rpx"
          lineWidth="64rpx" :activeStyle="{
      color: '#333333', 
      fontWeight: '500',
      fontSize:'32rpx'}" :inactiveStyle="{
       color: '#666666',
       fontWeight: '400',
       fontSize:'28rpx'}" @click="onHomeTab"></up-tabs>
      </up-sticky>
      <view class="nav-list">
        <view class="list-box" v-for="(item, index) in orderList" :key="index" @click="toresult(item.id)">
          <view class="box-label">
            <image src="@/static/home/image/truth.png" mode="" v-show="item.label ==1"></image>
            <image src="@/static/home/image/fake.png" mode="" v-show="item.label ==-1"></image>
            <image src="@/static/home/image/question.png" mode="" v-show="item.label ==2"></image>
          </view>
          <view class="box-head">
            <image :src="item.user.avatar" mode="" class="avatar"></image>
            <view class="head-name">{{item.user.nickname}}</view>
          </view>
          <view class="box-title">{{item.desc}}</view>
          <view class="box-img">
            <up-image :src="ite.image" radius="24rpx" width="192rpx" height="192rpx" mode="aspectFit" :lazy-load="true"
              v-for="ite,ind in item.task_image" :key="ite.task_id">
              <template v-slot:loading>
                <up-loading-icon color="#904007"></up-loading-icon>
              </template>
            </up-image>
          </view>
          <view class="box-timer">{{item.create_time}}</view>
        </view>
        <up-loadmore :status="status" :nomore-text="nomoreText" />
      </view>
    </view>
    <up-back-top :scroll-top="scrollTop" :icon="topIcon" z-index="999" bottom="20%"></up-back-top>
  </view>
  <tab-bar currentSelect="home" @showBottom="show = true"></tab-bar>
  <tab-popup :show.sync="show" :listData="classificationList" @showClose="show = false"
    @release="onrelease"></tab-popup>
  <RenewApp ref="renewApp"></RenewApp>
</template>

<script setup>
  import {
    listData,
    homeList,
    info
  } from './api.js'
  import {
    ref,
    reactive,
    onMounted,
    nextTick
  } from 'vue'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app';
  import RenewApp from '@/components/RenewApp/index.vue'
  const topIcon = '../../static/home/icon/topIcon.png'
  const orderList = ref([])
  const status = ref('loadmore');
  const current = ref(0)
  const unidentified = ref()
  const messageCount = ref()
  const renewApp = ref(null)
  const nomoreText = ref('')
  const page = ref({
    num: 1,
    size: 10
  })
  const show = ref(false)
  const isExpert = ref(false)
  const offsetTop = ref('')
  const banner = ref('')
  const scrollTop = ref(0);
  const gridList = reactive([{
    image: "/static/home/icon/identify.png",
    name: "极速鉴定",
    id: 1
  }, {
    image: "/static/home/icon/expert.png",
    name: "专家团",
    id: 2
  }, {
    image: "/static/home/icon/certificate.png",
    name: "证书查询",
    id: 3
  }])
  const classificationList = ref([])
  const list1 = ref([]);
  onPullDownRefresh(async () => {
    page.value.num = 1
    await homeListApi()
    await uni.stopPullDownRefresh();
  })
  onReachBottom(async () => {
    page.value.num++
    homeListApi();
  })
  onLoad(() => {
    listDataApi()
  })
  onShow(() => {
    classificationList.value = uni.getStorageSync('classificationList')
    if (uni.getStorageSync('atlas') && uni.getStorageSync('atlas').banner_image) {
      banner.value = uni.getStorageSync('atlas').banner_image
    } else {
      banner.value = '../../static/home/image/banner.png'
    }
    const token = uni.getStorageSync('userInfo').token ? true : false
    if (token) {
      infoApi()
    } else {
      isExpert.value = false
      unidentified.value = 0
      messageCount.value = 0
    }
    homeListApi()
    let topHight = uni.getSystemInfoSync().statusBarHeight
    // #ifdef APP-PLUS
    offsetTop.value = topHight + 44
    // #endif
  })
  onPageScroll((e) => {
    scrollTop.value = e.scrollTop;
  })
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      uni.setStorageSync("user", res.data)
      isExpert.value = res.data.is_expert === 1 ? true : false
      unidentified.value = res.data.pending_count
      messageCount.value = res.data.message_count
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })

  function ongridfn(id) {
    if (id === 1) {
      show.value = true
    } else if (id === 2) {
      uni.navigateTo({
        url: '/pages/index/ExpertPanelPage/expertPage'
      })
    } else if (id === 3) {
      uni.navigateTo({
        url: '/pages/index/certificatePage/certificateSearch'
      })
    }
  }
  const listDataApi = (async () => {
    const res = await listData()
    if (res && res.code === 1) {
      classificationList.value = res.data
      uni.setStorageSync('classificationList', classificationList.value)
      const arr = isExpert.value ? [{
        id: 0,
        name: '广场'
      }] : [{
        id: 0,
        name: '推荐'
      }]
      list1.value = [...arr, ...res.data]
    }
  })
  const homeListApi = (async () => {
    const res = await homeList({
      category_id: current.value,
      page: page.value.num,
      size: page.value.size
    })
    if (res && res.code == 1) {
      if (page.value.num == 1) orderList.value = []
      orderList.value = orderList.value.concat(res.data.data)
      if (page.value.num == 1 && res.data.data.length == 0) {
        status.value = 'nomore'
        nomoreText.value = '暂无相关内容'
        return
      }
      if (res.data.data.length == 0) {
        status.value = 'nomore'
        nomoreText.value = '没有更多了'
      } else {
        status.value = 'loading'
      }

    }
  })

  function onHomeTab(e) {
    current.value = e.id
    orderList.value = []
    page.value.num = 1
    homeListApi()
  }


  function onMessage() {
    const token = uni.getStorageSync('userInfo').token ? true : false
    if (token) {
      uni.navigateTo({
        url: '/pages/index/messagePage'
      })
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onrelease(val) {
    show.value = false
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyRelease`
    })
  }

  function toresult(id) {
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyResult?id=${id}`
    })
  }

  function onsearch() {
    uni.navigateTo({
      url: '/pages/index/searchPage/searchPage'
    })
  }

  function toTask() {
    uni.navigateTo({
      url: "/pages/index/identifyPage/identifyTask"
    })
  }
</script>

<style lang="scss" scoped>
  ::v-deep body,
  ::v-deep uni-page-body {
    height: auto;
  }

  ::v-deep .u-back-top {
    background-color: transparent;
  }

  ::v-deep .u-icon__img {
    width: 160rpx !important;
    height: 160rpx !important;
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // overflow: scroll;

    ::v-deep .u-navbar__content__left {
      padding: 0;
    }

    ::v-deep .u-navbar__content__right {
      padding-right: 44rpx;
      top: 20rpx;
    }

    .search-title {
      width: 108rpx;

      .head-logo {
        width: 108rpx;
        height: 48rpx;
      }
    }

    .search-input {
      width: 502rpx;
      height: 72rpx;
      border-radius: 38rpx;
      background: rgba(247, 248, 250, .3);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 30rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #fff;

      .input-text {
        margin-left: 16rpx;
      }
    }

    .search-mesage {
      position: relative;

      .subscript {
        height: 36rpx;
        width: 36rpx;
        position: absolute;
        right: -18rpx;
        top: -18rpx;
        opacity: 1;
        border-radius: 50%;
        background: #F03A40;
        border: 2rpx solid #FFFFFF;
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }

      image {
        height: 48rpx;
        width: 48rpx;
      }
    }

    .content-banner {
      width: 100%;
      height: 750rpx;
      position: relative;
      background-size: 100% 100%;
      // margin-top: -70rpx;
      flex: 0 0 auto;

      .content-grid {
        width: 690rpx;
        border-radius: 24rpx;
        background: #1A1A1A;
        position: absolute;
        left: 30rpx;
        bottom: 30rpx;
        z-index: 0;

        .grid-top {
          height: 64rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 30rpx;

          .grid-title {
            display: flex;
            align-items: center;

            .grid-img {
              height: 40rpx;
              width: 40rpx;
            }

            .grid-name {
              font-size: 28rpx;
              font-weight: 400;
              color: #fff;
              margin-left: 12rpx;
            }
          }

          .grid-label {
            font-size: 24rpx;
            font-weight: 400;
            color: #fff;

          }
        }

        .grid-list {
          width: 690rpx;
          height: 172rpx;
          border-radius: 20rpx;
          background: #FFFFFF;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 44rpx;
          justify-content: space-between;

          .list-nav {
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
              height: 72rpx;
              width: 72rpx;
            }

            .list-text {
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-top: 12rpx;
            }
          }

          .list-main {
            width: 690rpx;
            height: 172rpx;
            border-radius: 20rpx;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .main-left {
              display: flex;
              flex-direction: column;

              .main-head {
                display: flex;
                align-items: center;
                font-size: 34rpx;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);

                .main-img {
                  height: 56rpx;
                  width: 56rpx;
                }

                .main-name {
                  margin-left: 16rpx;
                }
              }

              .main-title {
                display: flex;
                align-items: center;
                font-size: 26rpx;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                margin-top: 12rpx;
              }
            }

            .main-right {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-weight: 400;
              color: $color;

            }
          }
        }
      }
    }

    .nav-content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;

      ::v-deep .u-sticky__content {
        height: 96rpx;
        border-bottom: 2rpx solid rgba(235, 235, 235, 1);
      }

      ::v-deep .u-tabs__wrapper {
        height: 96rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
        z-index: 1;
      }

      .nav-list {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
        padding: 0 30rpx;
        background-color: #FFFFFF;
        margin-bottom: 100rpx;

        .list-box {
          width: 690rpx;
          height: 460rpx;
          border-bottom: 2rpx solid rgba(235, 235, 235, 1);
          box-sizing: border-box;
          padding: 40rpx 0;
          position: relative;
          overflow: hidden;

          .box-label {
            height: 120rpx;
            width: 120rpx;
            position: absolute;
            top: 24rpx;
            right: 0;

            image {
              height: 120rpx;
              width: 120rpx;
            }
          }

          .box-head {
            display: flex;
            align-items: center;

            .avatar {
              width: 64rpx;
              height: 64rpx;
              border-radius: 50%;
            }

            .head-name {
              font-size: 32rpx;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              margin-left: 16rpx;
            }
          }

          .box-title {
            width: 460rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-left: 80rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .box-img {
            display: flex;
            align-items: center;
            margin: 24rpx 0 0 80rpx;

            ::v-deep .u-fade-enter-active {
              border-radius: 24rpx;
              margin-right: 16rpx;
              flex: 0 0 auto;
              border: 2rpx solid rgba(235, 235, 235, 1);
            }
          }

          .box-timer {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin: 24rpx 0 0 80rpx;
          }
        }
      }
    }
  }
</style>